<template>
    <div class="wrapper">
        <div class="dia">
            <van-search v-model="terminalSn" placeholder="请输入终端编号" shape="round" :show-action="showAction"
                class="search">
            </van-search>
            <div class="" @click="onSearch">
                搜索
            </div>
        </div>
        <van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
            <van-tab :title="item.channelName" v-for="(item,index) in tabList" :key="index" :name="index" />
        </van-tabs>
        <div class="dis">
            <div class="main">
                <div class="">
                    终端数据（台）
                </div>
                <div class="information dia">
                    <div class="dic">
                        <div class="amount">
                            {{list.directTerminals|| 0}}
                        </div>
                        <div class="information_font">
                            直属终端
                        </div>
                        <div class="amount" style="margin-top: 16px;">
                            {{list.totalTerminals || 0}}
                        </div>
                        <div class="information_font">
                            终端总数
                        </div>

                    </div>
                    <div class="dic">
                        <div class="amount">
                            {{list.totalActivations|| 0}}
                        </div>
                        <div class="information_font">
                            总激活数
                        </div>
                        <div class="amount" style="margin-top: 16px;">
                            {{list.yesterdayActivations|| 0}}
                        </div>
                        <div class="information_font">
                            昨日激活
                        </div>

                    </div>
                    <div class="dic">
                        <div class="amount">
                            {{list.totalBindings|| 0}}
                        </div>
                        <div class="information_font">
                            总绑定数
                        </div>
                        <div class="amount" style="margin-top: 16px;">
                            {{list.yesterdayBindings|| 0}}
                        </div>
                        <div class="information_font">
                            昨日绑定
                        </div>

                    </div>
                </div>
                <!-- <div class="information dia">
					<div class="dic">
						<div class="amount">
							{{list.directTerminals|| 0}}
						</div>
						<div class="information_font">
							直属终端
						</div>
					</div>
					<div class="dic">
						<div class="amount">
							{{list.totalActivations|| 0}}
						</div>
						<div class="information_font">
							总激活数
						</div>
					</div>
					<div class="dic">
						<div class="amount">
							{{list.totalBindings|| 0}}
						</div>
						<div class="information_font">
							总绑定数
						</div>
					</div>
					
				</div> -->
            </div>
        </div>
        <div class="dis">
            <div class="activity dia">
                <!-- <div class="activity_box" @click="navUrl('/activity')">
					<div class="dia">
						<div class="dis">
							<img src="@/assets/terminal/alteration.png" alt="" />
						</div>
						<div class="activity_font">
							变更活动
						</div>
					</div>
				</div> -->
                <div class="activity_box withhold" @click="navUrl('/alterRate')">
                    <div class="dia">
                        <div class="dis">
                            <img src="@/assets/terminal/rate.png" alt="" />
                        </div>
                        <div class="activity_font">
                            变更费率
                        </div>
                    </div>
                </div>
                <div class="activity_box withhold" @click="navUrl('/transfer')">
                    <div class="dia">
                        <div class="dis">
                            <img src="@/assets/terminal/transfer.png" alt="" />
                        </div>
                        <div class="activity_font">
                            终端划拨
                        </div>
                    </div>
                </div>
                <div class="activity_box withhold" @click="navUrl('/callback')">
                    <div class="dia">
                        <div class="dis">
                            <img src="@/assets/terminal/callback.png" alt="" />
                        </div>
                        <div class="activity_font">
                            终端回拨
                        </div>
                    </div>
                </div>
                <div class="activity_box withhold" @click="navUrl('/complete')">
                    <div class="dia">
                        <div class="dis">
                            <img src="@/assets/terminal/complete.png" alt="" />
                        </div>
                        <div class="activity_font">
                            全部终端
                        </div>
                    </div>
                </div>
                <div class="activity_box withhold" @click="navUrl('/transferRecord')">
                    <div class="dia">
                        <div class="dis">
                            <img src="@/assets/terminal/appropriate.png" alt="" />
                        </div>
                        <div class="activity_font">
                            划拨记录
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {
        selectAgentChannelInf,
        selectTerSumList
    } from '@/api/terminal'
    import router from '@/router'
    import store from '@/store'
    import {
        useRoute
    } from 'vue-router'
    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'terminalList',
        setup() {
            // const router = useRouter()
            const state = reactive({
                active: 0,
                list: [],
                tabList: [],
                showAction: false,
                terminalSn: ""
            })
            //获取渠道列表
            const getTabList = () => {
                selectAgentChannelInf({
                    channelType: 1
                }).then(res => {
                    state.tabList = res.data
                    getList(state.tabList[state.active].channelCode)
                })
            }
            //tab切换
            const tabDitch = () => {

                getList(state.tabList[state.active].channelCode)
            }
            //获取数据汇总信息
            const getList = (e) => {
                selectTerSumList({
                    channelCode: e
                }).then(res => {
                    state.list = res.data
                })
            }
            //跳转变更活动
            const navUrl = (url) => {
                router.push({
                    path: url,
                    query: {
                        channelCode: state.tabList[state.active].channelCode,
                        activityId: state.tabList[state.active].activityId,
                        channelName: state.tabList[state.active].channelName,
                        active: state.active
                    }
                })
            }
            getTabList()
            //搜索终端编号
            const onSearch = () => {
                if (state.terminalSn == '') {
                    showToast('请输入搜素的终端编号')
                    return
                }
                router.push({
                    path: '/complete',
                    query: {
                        terminalSn: state.terminalSn,
                    }
                })

            }
            return {
                ...toRefs(state),
                // checkedAllClick,
                getList,
                getTabList,
                tabDitch,
                navUrl,
                onSearch
            }
        }
    })
</script>
<style scoped lang="scss">
    .wrapper {
        height: 100vh;
        background: #fff;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .main {
            width: 339px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            border-radius: 6px;
            padding: 10px 10px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #333333;
            margin-top: 9px;

            .information {
                padding-left: 13px;
                padding-right: 13px;
                box-sizing: border-box;
                justify-content: space-between;
                margin-top: 20px;

                .amount {
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    font-size: 22px;
                    color: #003C76;
                }

                .information_font {
                    margin-top: 14px;
                }
            }

        }

        .activity {
            width: 339px;

            margin-top: 15px;
            flex-wrap: wrap;
            justify-content: space-between;

            .activity_box {
                padding: 18px 17px;
                box-sizing: border-box;
                width: 164px;
                box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                border-radius: 6px;
                height: 74px;

                .activity_font {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    color: #333333;
                    margin-left: 9px;
                }

                img {
                    width: 37px;
                    height: 37px;
                }
            }

            .withhold {
                margin-top: 15px;
            }
        }
    }
</style>